import React, { useRef } from 'react'
import './index.css'
const Index: React.FC = () => {
    const containerRef2 = useRef<HTMLDivElement>(null);
    const scrollLeft2 = () => {
        if (containerRef2.current) {
            containerRef2.current.scrollBy({ left: -600, behavior: 'smooth' });
        }
    };

    const scrollRight2 = () => {
        if (containerRef2.current) {
            containerRef2.current.scrollBy({ left: 600, behavior: 'smooth' });
        }
    };

    return (
        <div>
            <div>
                <h2>夏天</h2>
                <div className='imagecondata'>
                    <button onClick={scrollLeft2} className="imageconbtn1">←</button>
                    <div className="imageconnei" ref={containerRef2}>
                        {/* 在这里添加内容，例如多个图片或列表项 */}
                        <div className="item1">
                            <img src="https://photo-static-api.fotomore.com/creative/vcg/400/version23/VCG41155385658.jpg?uid=364&timestamp=1718090727&sign=9583e8c0ffe28d67eb0fbdbe9e713f8f&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        </div>
                        <div className="item1">
                            <img src="https://photo-static-api.fotomore.com/creative/vcg/400/version23/VCG41155438495.jpg?uid=364&timestamp=1718090727&sign=9583e8c0ffe28d67eb0fbdbe9e713f8f&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        </div>
                        <div className="item1">
                            <img src="https://photo-static-api.fotomore.com/creative/vcg/400/version23/VCG41117147344.jpg?uid=364&timestamp=1718090727&sign=9583e8c0ffe28d67eb0fbdbe9e713f8f&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        </div>
                        <div className="item1">
                            <img src="https://photo-static-api.fotomore.com/creative/vcg/veer/400/new/VCG41N157420573.jpg?uid=364&timestamp=1718090727&sign=9583e8c0ffe28d67eb0fbdbe9e713f8f&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        </div>
                        <div className="item1">
                            <img src="https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG211177157984.jpg?uid=364&timestamp=1718090727&sign=9583e8c0ffe28d67eb0fbdbe9e713f8f&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        </div>
                        <div className="item1">
                            <img src="https://photo-static-api.fotomore.com/creative/vcg/400/version23/VCG41158999569.jpg?uid=364&timestamp=1718090727&sign=9583e8c0ffe28d67eb0fbdbe9e713f8f&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        </div>
                        <div className="item1">
                            <img src="https://photo-static-api.fotomore.com/creative/vcg/400/version23/VCG41155394486.jpg?uid=364&timestamp=1718090727&sign=9583e8c0ffe28d67eb0fbdbe9e713f8f&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        </div>
                        <div className="item1">
                            <img src="https://photo-static-api.fotomore.com/creative/vcg/400/version23/VCG41185264528.jpg?uid=364&timestamp=1718090727&sign=9583e8c0ffe28d67eb0fbdbe9e713f8f&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        </div>
                        <div className="item1">
                            <img src="https://photo-static-api.fotomore.com/creative/vcg/400/version23/VCG41118401006.jpg?uid=364&timestamp=1718090727&sign=9583e8c0ffe28d67eb0fbdbe9e713f8f&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        </div>
                        <div className="item1">
                            <img src="https://photo-static-api.fotomore.com/creative/vcg/veer/400/new/VCG41N623215778.jpg?uid=364&timestamp=1718090727&sign=9583e8c0ffe28d67eb0fbdbe9e713f8f&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        </div>
                    </div>
                    <button onClick={scrollRight2} className="imageconbtn1">→</button>
                </div>
            </div>
        </div>
    )
}

export default Index